<template>
  <AdminLayout>
    <div class="customers-management" style="min-height: calc(100vh - 60px);">
      <div class="page-header">
        <h2>客户管理</h2>
      </div>
      
      <div class="search-filter">
        <div class="search-box">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11 19C15.42 19 19 15.42 19 11C19 6.58 15.42 3 11 3C6.58 3 3 6.58 3 11C3 15.42 6.58 19 11 19ZM21 21L16.65 16.65" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <input type="text" placeholder="搜索客户姓名或电话..." v-model="searchQuery"/>
        </div>
        <div class="filter-select">
          <select v-model="statusFilter">
            <option value="all">全部状态</option>
            <option value="active">活跃</option>
            <option value="inactive">不活跃</option>
          </select>
        </div>
        <div class="search-actions">
          <button class="search-button" @click="performSearch">
            搜索
          </button>
          <button class="reset-button" @click="resetFilters">
            重置
          </button>
          <button class="import-button" @click="triggerImport">
            导入
            <input type="file" id="import-csv" accept=".csv" @change="handleImport" style="display: none;" />
          </button>
          <button class="export-button" @click="exportCustomers">
            导出
          </button>
          <button class="add-button" @click="showAddModal = true">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            添加客户
          </button>
          <button class="batch-delete-button" @click="batchDeleteSelected" :disabled="selectedCustomers.length === 0">
            批量删除
          </button>
        </div>
      </div>
      
      <div class="customers-table-container">
        <table class="customers-table">
          <thead>
            <tr>
              <th style="width: 40px;">
                <input type="checkbox" v-model="selectAll" @change="toggleSelectAll" />
              </th>
              <th>头像</th>
              <th>客户ID</th>
              <th>姓名</th>
              <th>电话</th>
              <th>电子邮箱</th>
              <th>购买时间</th>
              <th>状态</th>
              <th>订单数</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="customer in filteredCustomers" :key="customer.id">
              <td>
                <input type="checkbox" :value="customer.id" v-model="selectedCustomers" />
              </td>
              <td>
                <div class="avatar-container" @click="showAvatarPreview(customer.avatar || getDefaultAvatar(customer.name))">
                  <img 
                    :src="customer.avatar || getDefaultAvatar(customer.name)" 
                    alt="{{ customer.name }}" 
                    class="customer-avatar" 
                  />
                </div>
              </td>
              <td>{{ customer.id }}</td>
              <td>{{ customer.name }}</td>
              <td>{{ customer.phone }}</td>
              <td>{{ customer.email }}</td>
              <td>{{ getFirstOrderDate(customer.name) }}</td>
              <td>
                <span class="status-badge" :class="customer.status">
                  {{ getStatusText(customer.status) }}
                </span>
              </td>
              <td>{{ getCustomerOrderCount(customer.name) }}</td>
              <td>
                <div class="action-buttons">
                  <button class="view-button" @click="viewCustomer(customer.id)">
                    查看
                  </button>
                  <button class="edit-button" @click="editCustomer(customer.id)">
                    编辑
                  </button>
                  <button class="delete-button" @click="deleteCustomer(customer.id)">
                    删除
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        
        <div v-if="filteredCustomers.length === 0" class="no-data">
          <p>暂无客户数据</p>
        </div>
      </div>
      
      <div class="pagination">
        <button class="pagination-button" :disabled="currentPage === 1" @click="currentPage--">
          上一页
        </button>
        <div class="page-numbers">
          <span v-for="page in totalPages" :key="page" 
                class="page-number" :class="{ active: page === currentPage }"
                @click="currentPage = page">
            {{ page }}
          </span>
        </div>
        <button class="pagination-button" :disabled="currentPage === totalPages" @click="currentPage++">
          下一页
        </button>
      </div>
      
      <!-- 添加/编辑客户弹窗 -->
      <div v-if="showAddModal || showEditModal" class="modal-overlay" @click="closeModals">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3>{{ showAddModal ? '添加客户' : '编辑客户' }}</h3>
            <button class="close-button" @click="closeModals">×</button>
          </div>
          <div class="modal-body">
            <form @submit.prevent="saveCustomer">
              <div class="form-group avatar-upload-group">
                <label>头像</label>
                <div class="avatar-upload-container">
                  <div class="avatar-preview">
                    <img 
                      :src="currentCustomer.avatar || getDefaultAvatar(currentCustomer.name)" 
                      alt="预览头像" 
                      class="avatar-upload-preview" 
                    />
                  </div>
                  <div class="avatar-upload-button">
                    <input 
                      type="file" 
                      id="avatar-upload" 
                      accept="image/*" 
                      @change="handleAvatarUpload"
                      style="display: none;"
                    />
                    <label for="avatar-upload" class="upload-button">
                      上传头像
                    </label>
                    <span v-if="currentCustomer.avatar" class="remove-avatar" @click="removeAvatar">
                      移除头像
                    </span>
                  </div>
                  <div class="upload-tips">支持 JPG、PNG 格式，文件大小不超过 2MB</div>
                </div>
              </div>
              <div class="form-group">
                <label>姓名 *</label>
                <input type="text" v-model="currentCustomer.name" required placeholder="请输入客户姓名"/>
              </div>
              <div class="form-group">
                <label>电话 *</label>
                <input type="tel" v-model="currentCustomer.phone" required placeholder="请输入客户电话"/>
              </div>
              <div class="form-group">
                <label>电子邮箱</label>
                <input type="email" v-model="currentCustomer.email" placeholder="请输入客户电子邮箱"/>
              </div>
              <div class="form-group">
                <label>地址</label>
                <textarea v-model="currentCustomer.address" placeholder="请输入客户地址"></textarea>
              </div>
              <div class="form-group">
                <label>状态</label>
                <select v-model="currentCustomer.status">
                  <option value="active">活跃</option>
                  <option value="inactive">不活跃</option>
                </select>
              </div>
              <div class="form-actions">
                <button type="button" class="cancel-button" @click="closeModals">取消</button>
                <button type="submit" class="save-button">保存</button>
              </div>
            </form>
          </div>
        </div>
      </div>
      
      <!-- 客户详情弹窗 -->
      <div v-if="showViewModal" class="modal-overlay" @click="closeViewModal">
        <div class="modal-content" @click.stop>
          <div class="modal-header">
            <h3>客户详情</h3>
            <button class="close-button" @click="closeViewModal">×</button>
          </div>
          <div class="customer-details">
            <div class="customer-avatar-large">
              <img 
                :src="viewedCustomer.avatar || getDefaultAvatar(viewedCustomer.name)" 
                alt="{{ viewedCustomer.name }}" 
                class="avatar-large" 
                @click="showAvatarPreview(viewedCustomer.avatar || getDefaultAvatar(viewedCustomer.name))"
              />
              <div class="customer-name-large">{{ viewedCustomer.name }}</div>
            </div>
            <div class="info-row">
              <span class="info-label">客户ID：</span>
              <span class="info-value">{{ viewedCustomer.id }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">姓名：</span>
              <span class="info-value">{{ viewedCustomer.name }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">电话：</span>
              <span class="info-value">{{ viewedCustomer.phone }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">电子邮箱：</span>
              <span class="info-value">{{ viewedCustomer.email || '未提供' }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">地址：</span>
              <span class="info-value">{{ viewedCustomer.address || '未提供' }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">购买时间：</span>
              <span class="info-value">{{ getFirstOrderDate(viewedCustomer.name) }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">最后登录：</span>
              <span class="info-value">{{ viewedCustomer.lastLogin ? formatDateTime(viewedCustomer.lastLogin) : '从未登录' }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">状态：</span>
              <span class="info-value status-value" :class="viewedCustomer.status">
                {{ getStatusText(viewedCustomer.status) }}
              </span>
            </div>
            <div class="info-row">
              <span class="info-label">订单数：</span>
              <span class="info-value">{{ getCustomerOrderCount(viewedCustomer.name) }}</span>
            </div>
            <div class="info-row">
              <span class="info-label">总消费：</span>
              <span class="info-value">¥{{ viewedCustomer.totalSpent }}</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 头像预览弹窗 -->
      <div v-if="showAvatarPreview" class="modal-overlay" @click="closeAvatarPreview">
        <div class="modal-content avatar-preview-modal" @click.stop>
          <button class="close-button" @click="closeAvatarPreview">×</button>
          <div class="avatar-preview-container">
            <img :src="previewAvatarUrl" alt="头像预览" class="preview-avatar" />
          </div>
        </div>
      </div>
    </div>
  </AdminLayout>
</template>

<script>
import AdminLayout from './AdminLayout.vue'
import CustomerStore from '../../services/CustomerStore.js'
import OrderStore from '../../services/OrderStore.js'

export default {
  name: 'CustomersManagement',
  components: {
    AdminLayout
  },
  data() {
    return {
      customers: [],
      searchQuery: '',
      statusFilter: 'all',
      currentPage: 1,
      itemsPerPage: 10,
      showAddModal: false,
      showEditModal: false,
      showViewModal: false,
      currentCustomer: {
        name: '',
        phone: '',
        email: '',
        address: '',
        status: 'active',
        avatar: ''
      },
      viewedCustomer: {},
      editingCustomerId: null,
      showAvatarPreview: false,
      previewAvatarUrl: '',
      selectedCustomers: [],
      selectAll: false
    }
  },
  created() {
    // 添加监听器，当CustomerStore或OrderStore数据更新时刷新页面
    CustomerStore.addListener(this.loadCustomers);
    OrderStore.addListener(this.loadCustomers);
    // 确保订单数据已加载
    OrderStore.loadOrders().then(() => {
      // 加载客户数据
      this.loadCustomers();
    });
  },
  beforeUnmount() {
    // 移除监听器
    CustomerStore.removeListener(this.loadCustomers);
  },
  watch: {
    selectedCustomers: {
      handler() {
        // 如果当前页面所有客户都被选中，则设置全选为true
        this.selectAll = this.filteredCustomers.length > 0 && 
                        this.selectedCustomers.length === this.filteredCustomers.length;
      },
      deep: true
    }
  },
  computed: {
    filteredCustomers() {
      let result = [...this.customers];
      
      // 搜索过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        result = result.filter(customer => 
          customer.name.toLowerCase().includes(query) ||
          customer.phone.includes(query) ||
          (customer.email && customer.email.toLowerCase().includes(query))
        );
      }
      
      // 状态过滤
      if (this.statusFilter !== 'all') {
        result = result.filter(customer => customer.status === this.statusFilter);
      }
      
      // 按注册日期降序排序
      result.sort((a, b) => new Date(b.registerDate) - new Date(a.registerDate));
      
      // 分页
      const startIndex = (this.currentPage - 1) * this.itemsPerPage;
      const endIndex = startIndex + this.itemsPerPage;
      return result.slice(startIndex, endIndex);
    },
    totalPages() {
      let result = [...this.customers];
      
      // 搜索过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        result = result.filter(customer => 
          customer.name.toLowerCase().includes(query) ||
          customer.phone.includes(query) ||
          (customer.email && customer.email.toLowerCase().includes(query))
        );
      }
      
      // 状态过滤
      if (this.statusFilter !== 'all') {
        result = result.filter(customer => customer.status === this.statusFilter);
      }
      
      return Math.ceil(result.length / this.itemsPerPage);
    }
  },
    methods: {
    async loadCustomers() {
      // 如果CustomerStore还没有加载过数据，则触发加载
      if (!CustomerStore.isLoading && this.customers.length === 0) {
        await CustomerStore.loadCustomers();
      }
      // 从CustomerStore获取所有客户
      this.customers = CustomerStore.getAllCustomers();
    },
    
    performSearch() {
      this.currentPage = 1;
    },
    
    resetFilters() {
      this.searchQuery = '';
      this.statusFilter = 'all';
      this.currentPage = 1;
      this.selectedCustomers = [];
      this.selectAll = false;
    },
    
    // 全选/取消全选
    toggleSelectAll() {
      if (this.selectAll) {
        // 全选当前页面的所有客户
        this.selectedCustomers = this.filteredCustomers.map(customer => customer.id);
      } else {
        // 取消全选
        this.selectedCustomers = [];
      }
    },

    // 批量删除选中的客户
    async batchDeleteSelected() {
      if (this.selectedCustomers.length === 0) {
        alert('请先选择要删除的客户');
        return;
      }
      
      if (confirm(`确定要删除选中的 ${this.selectedCustomers.length} 个客户吗？此操作不可撤销。`)) {
        const success = await CustomerStore.batchDeleteCustomers(this.selectedCustomers);
        if (success) {
          this.selectedCustomers = [];
          this.selectAll = false;
          // 如果删除的是当前页面的最后一条数据，且当前页不是第一页，则返回上一页
          if (this.filteredCustomers.length === this.selectedCustomers.length && this.currentPage > 1) {
            this.currentPage--;
          }
        } else {
          alert('批量删除客户失败，请重试。');
        }
      }
    },
    
    // 导出客户数据
    exportCustomers() {
      CustomerStore.exportCustomersToCSV();
    },
    
    // 触发导入文件选择
    triggerImport() {
      document.getElementById('import-csv').click();
    },
    
    // 处理导入文件
    async handleImport(event) {
      const file = event.target.files[0];
      if (!file) {
        return;
      }
      
      // 检查文件类型
      if (!file.name.endsWith('.csv')) {
        alert('只支持CSV格式的文件');
        return;
      }
      
      try {
        const importedCount = await CustomerStore.importCustomersFromCSV(file);
        alert(`成功导入 ${importedCount} 个客户数据`);
        // 清空文件选择
        event.target.value = '';
      } catch (error) {
        console.error('Import failed:', error);
        alert('导入失败：' + error.message);
        // 清空文件选择
        event.target.value = '';
      }
    },
    
    addNewCustomer() {
      this.currentCustomer = {
        name: '',
        phone: '',
        email: '',
        address: '',
        status: 'active',
        avatar: ''
      };
      this.editingCustomerId = null;
      this.showAddModal = true;
    },
    
    editCustomer(id) {
      const customer = CustomerStore.getCustomerById(id);
      if (customer) {
        this.currentCustomer = { ...customer };
        this.editingCustomerId = id;
        this.showEditModal = true;
      }
    },
    
    viewCustomer(id) {
      const customer = CustomerStore.getCustomerById(id);
      if (customer) {
        this.viewedCustomer = { ...customer };
        this.showViewModal = true;
      }
    },
    
    async deleteCustomer(id) {
      if (confirm('确定要删除此客户吗？此操作不可撤销。')) {
        const success = await CustomerStore.deleteCustomer(id);
        if (success) {
          // 如果删除的是当前页面的最后一条数据，且当前页不是第一页，则返回上一页
          if (this.filteredCustomers.length === 1 && this.currentPage > 1) {
            this.currentPage--;
          }
        } else {
          alert('删除客户失败，请重试。');
        }
      }
    },
    
    async saveCustomer() {
      if (this.showAddModal) {
        // 添加新客户
        const newCustomer = {
          ...this.currentCustomer
        };
        
        const result = await CustomerStore.addCustomer(newCustomer);
        if (result) {
          this.closeModals();
        } else {
          alert('添加客户失败，请重试。');
        }
      } else if (this.showEditModal) {
        // 编辑现有客户
        const updatedCustomer = {
          ...this.currentCustomer
        };
        
        const result = await CustomerStore.updateCustomer(this.editingCustomerId, updatedCustomer);
        if (result) {
          this.closeModals();
        } else {
          alert('更新客户失败，请重试。');
        }
      }
    },
    
    closeModals() {
      this.showAddModal = false;
      this.showEditModal = false;
      this.currentCustomer = {
        name: '',
        phone: '',
        email: '',
        address: '',
        status: 'active',
        avatar: ''
      };
      this.editingCustomerId = null;
    },
    
    async handleAvatarUpload(event) {
      const file = event.target.files[0];
      if (file) {
        // 检查文件大小
        if (file.size > 2 * 1024 * 1024) {
          alert('文件大小不能超过2MB');
          return;
        }
        
        // 检查文件类型
        const validTypes = ['image/jpeg', 'image/png'];
        if (!validTypes.includes(file.type)) {
          alert('只支持JPG、PNG格式的图片');
          return;
        }
        
        try {
          // 使用CustomerStore上传头像
          const avatarUrl = await CustomerStore.uploadAvatar(file);
          this.currentCustomer.avatar = avatarUrl;
        } catch (error) {
          console.error('Failed to upload avatar:', error);
          alert('上传头像失败，请重试。');
        }
      }
    },
    
    removeAvatar() {
      this.currentCustomer.avatar = '';
    },
    
    getDefaultAvatar(name) {
      // 使用CustomerStore的方法生成默认头像
      return CustomerStore.getDefaultAvatar(name);
    },
    
    showAvatarPreview(url) {
      this.previewAvatarUrl = url;
      this.showAvatarPreview = true;
    },
    
    closeAvatarPreview() {
      this.showAvatarPreview = false;
      this.previewAvatarUrl = '';
    },
    
    closeViewModal() {
      this.showViewModal = false;
      this.viewedCustomer = {};
    },
    
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      });
    },
    
    formatDateTime(dateString) {
      const date = new Date(dateString);
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    },
    
    getStatusText(status) {
      return status === 'active' ? '活跃' : '不活跃';
    },
    
    // 获取客户的订单数
    getCustomerOrderCount(customerName) {
      const orders = OrderStore.getAllOrders();
      return orders.filter(order => order.customerName === customerName).length;
    },
    
    // 获取客户的第一个订单日期
    getFirstOrderDate(customerName) {
      const orders = OrderStore.getAllOrders();
      const customerOrders = orders
        .filter(order => order.customerName === customerName)
        .sort((a, b) => new Date(a.orderDate) - new Date(b.orderDate));
        
      if (customerOrders.length > 0) {
        return this.formatDateTime(customerOrders[0].orderDate);
      }
      return '暂无订单';
    }
  }
}
</script>

<style scoped>
.customers-management {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.add-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.add-button:hover {
  background-color: #45a049;
}

.search-filter {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.search-box {
  position: relative;
  flex: 1;
  min-width: 280px;
  max-width: 500px;
}

.search-box svg {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.search-box input {
  width: 100%;
  min-width: 250px;
  padding: 10px 15px 10px 45px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.filter-select select {
  padding: 10px 15px;
  min-width: 120px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  background-color: white;
  cursor: pointer;
}

.customers-table-container {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 20px;
  max-height: 600px;
  overflow-y: auto;
}

.customers-table {
  width: 100%;
  border-collapse: collapse;
}

.customers-table th,
  .customers-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .customers-table th:first-child,
  .customers-table td:first-child {
    padding: 10px 5px;
  }

.customers-table th:first-child,
.customers-table td:first-child {
  padding: 15px 8px;
  text-align: center;
}

.customers-table th {
  background-color: #f5f5f5;
  font-weight: 600;
  color: #333;
  font-size: 14px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.customers-table td {
  font-size: 14px;
  color: #666;
}

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.active {
  background-color: #e8f5e9;
  color: #4caf50;
}

.status-badge.inactive {
  background-color: #f5f5f5;
  color: #999;
}

.action-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.view-button {
  padding: 6px 12px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.view-button:hover {
  background-color: #1976d2;
}

.edit-button {
  padding: 6px 12px;
  background-color: #ff9800;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.edit-button:hover {
  background-color: #f57c00;
}

.delete-button {
  padding: 6px 12px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.delete-button:hover {
  background-color: #d32f2f;
}

.no-data {
  padding: 60px 20px;
  text-align: center;
  color: #999;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  margin-left: 20px;
  padding: 10px 0;
}

.pagination-button {
  padding: 6px 12px;
  background-color: #fff;
  color: #333;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  min-width: 60px;
  text-align: center;
}

.pagination-button:hover:not(:disabled) {
  color: #1890ff;
  border-color: #1890ff;
}

.pagination-button:disabled {
  color: #d9d9d9;
  cursor: not-allowed;
}

.page-numbers {
  display: flex;
  gap: 4px;
}

.page-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #333;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.page-number:hover {
  background-color: #f5f5f5;
  border-color: #ccc;
}

.page-number.active {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
}

/* Modal styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  border-radius: 8px;
  padding: 30px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e0e0e0;
}

.modal-header h3 {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.close-button:hover {
  background-color: #f5f5f5;
  color: #333;
}

/* Form styles */
.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
  font-size: 14px;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #4caf50;
}

.form-group textarea {
  min-height: 80px;
  resize: vertical;
}

.form-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e0e0e0;
}

.cancel-button {
  padding: 10px 20px;
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-button:hover {
  background-color: #e0e0e0;
  border-color: #ccc;
}

.save-button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.save-button:hover {
  background-color: #45a049;
}

/* Search actions styles */
.search-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 复选框样式 */
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.import-button,
.export-button {
  padding: 10px 20px;
  background-color: #2196f3;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 10px;
}

.import-button:hover,
.export-button:hover {
  background-color: #1976d2;
}

.batch-delete-button {
  padding: 10px 20px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: 10px;
}

.batch-delete-button:hover:not(:disabled) {
  background-color: #d32f2f;
}

.batch-delete-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* 适配移动端的按钮布局 */
@media (max-width: 768px) {
  .search-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .search-actions button {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
    justify-content: center;
  }
}

.search-button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.search-button:hover {
  background-color: #45a049;
}

.reset-button {
  padding: 10px 20px;
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.reset-button:hover {
  background-color: #e0e0e0;
  border-color: #ccc;
}

/* Customer details styles */
.customer-details {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.info-row {
  display: flex;
}

.info-label {
  width: 120px;
  font-weight: 500;
  color: #666;
}

.info-value {
  flex: 1;
  color: #333;
}

/* 客户头像样式 */
.avatar-container {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #e0e0e0;
  margin: 0 auto;
}

.customer-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 头像上传样式 */
.avatar-upload-group {
  margin-bottom: 25px;
}

.avatar-upload-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.avatar-preview {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #e0e0e0;
}

.avatar-upload-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-upload-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.upload-button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.upload-button:hover {
  background-color: #45a049;
}

.remove-avatar {
  color: #f44336;
  cursor: pointer;
  font-size: 12px;
  text-decoration: underline;
}

.remove-avatar:hover {
  color: #d32f2f;
}

.upload-tips {
  font-size: 12px;
  color: #999;
  text-align: center;
}

/* 客户详情中的头像样式 */
.customer-avatar-large {
  text-align: center;
  margin-bottom: 30px;
}

.avatar-large {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #e0e0e0;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.avatar-large:hover {
  transform: scale(1.05);
}

.customer-name-large {
  margin-top: 15px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

/* 头像预览弹窗样式 */
.avatar-preview-modal {
  padding: 20px;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
}

.avatar-preview-container {
  max-width: 100%;
  max-height: 60vh;
}

.preview-avatar {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}

.avatar-preview-modal .close-button {
  position: absolute;
  top: 10px;
  right: 10px;
}

.status-value {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status-value.active {
  background-color: #e8f5e9;
  color: #4caf50;
}

.status-value.inactive {
  background-color: #f5f5f5;
  color: #999;
}

/* Responsive design */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
  }
  
  .search-filter {
    flex-direction: column;
    align-items: stretch;
  }
  
  .customers-table-container {
    overflow-x: auto;
  }
  
  .customers-table {
    min-width: 800px;
  }
  
  .modal-content {
    margin: 20px;
    padding: 20px;
  }
  
  .info-row {
    flex-direction: column;
  }
  
  .info-label {
    width: auto;
    margin-bottom: 5px;
  }
}
</style>